<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" th:href="@{/favicon.ico}" type="image/x-icon" />
    <link rel="stylesheet" th:href="@{/css/app.css}">
    <link rel="stylesheet" th:href="@{/css/iconfont.css}">
    <link rel="stylesheet" th:href="@{/css/home.css}">
    <title>Blog</title>
</head>
<body>
    <div class="headBar">
        <div class="headBar-items">
<!--            <div class="headBar-item">-->
<!--                <form action="#" class="search">-->
<!--                        <input name="search">-->
<!--                        <button type="submit" class="iconfont icon-find"></button>-->
<!--                </form>-->
<!--            </div>-->
            <div class="headBar-item">
                <a>友情链接</a>
            </div>
            <div class="headBar-item">
                <a th:href="@{/auth}" target="_blank">说明</a>
            </div>
        </div>
    </div>
    <div class="content">
        <!--
            左边博客
        -->
        <div class="content-article">
            <ul th:each="blog:${blogs}">
                <li>
                    <img th:src="@{${blog.cover}}">
                    <span>
                        <h1><a th:href="@{'/user/'+${user.id}+'/blog/'+${blog.id}+'/article'}" th:text="${blog.title}" target="_blank"></a></h1>
<!--                        <div>-->
<!--                            <h4 th:if="${blog.top}" class="iconfont icon-discount">Top</h4>-->
<!--                        </div>-->
                        <div>
                            <h2 th:text="${blog.releaseTime}" class="iconfont icon-edit"></h2>
                            <h2 th:text="${blog.browse}" class="iconfont icon-browse"></h2>
                            <h2 th:text="${blog.good}" class="iconfont icon-good"></h2>
                        </div>
                        <h3 th:text="${blog.blogAbstract}"></h3>
                    </span>
                </li>
            </ul>
            <div style="display: flex;align-items: center;justify-content: space-between" >
                <a th:if="${page!=2}" th:href="@{'/home'+'?page='+${page-2}}" class="iconfont icon-arrow-left-bold" style="font-size: 30px;background-color: #fff;border-radius: 10px;color: #000;padding: 10px"></a>
                <a th:if="${blogs.size()==pageSize}" th:href="@{'/home'+'?page='+${page}}" class="iconfont icon-arrow-right-bold" style="font-size: 30px;background-color: #fff;border-radius: 10px;color: #000;padding: 10px"></a>
            </div>
        </div>
        <!--
            右边
        -->
        <div class="content-user">
            <ul>
                <!--
                    自我介绍
                -->
                <li>
                    <div>
                        <img th:src="@{${user.avatarUrl}}">
                    </div>
                    <h1 th:text="${user.nickName}"></h1>
                    <div>
                        <span class="iconfont icon-image-text"></span>
                        <span class="iconfont icon-comment"></span>
                        <span class="iconfont icon-good"></span>
                        <span class="iconfont icon-bad"></span>
                    </div>
                    <div>
                        <span th:text="${user.blog}"></span>
                        <span th:text="${user.message}"></span>
                        <span th:text="${user.good}"></span>
                        <span th:text="${user.bad}"></span>
                    </div>
                    <div>
                        <a class="iconfont icon-github" style="color: #000;" th:text="${user.introduction}"></a>
                    </div>
                </li>
                <!--
                    公告栏
                -->
                <li>
                    <h1>公告</h1>
                    <div th:each="notice:${notices}" class="notice">

                        <p th:if="${notice.top==true}"  class="iconfont icon-notification top"></p>
                        <p th:if="${notice.top==false}" class="iconfont icon-notification normal"></p>
                        <p style="text-align: start" th:text="${notice.content}"></p>
                    </div>
                </li>
                <!--
                    分类栏
                -->
                <li>
                    <h1>分栏</h1>
                    <div th:each="category:${categories}" class="category">
                        <p style="text-align: start"><a th:href="@{'/user/'+${user.id}+'/category/'+${category.id}}" th:text="${category.value}" target="_blank"></a></p>
                        <p style="text-align: end" th:text="${category.blog}"></p>
                    </div>
                </li>
                <li>
                    <div >
                        <a href="https://beian.miit.gov.cn/#/Integrated/recordQuery" target="_blank">
                            渝ICP备2022006298号-1</a>
                    </div>
                </li>
            </ul>
        </div>

    </div>
</body>
</html>